<!--用户选择器-->
<template>
    <el-dialog
        class="user-select-dialog"
        :title="title"
        :visible.sync="isSync"
        :append-to-body="true"
        :modal="false"
        :close-on-click-modal="false"
        @open="handlerDiaOpen"
    >
        <header
            class="flex justify-between padding-bottom-xs"
        >
            <!--            右侧筛选信息输入部分-->
            <div>
                <el-input
                    v-model="filterParam.nickname"
                    class="margin-right-xs"
                    size="mini"
                    placeholder="输入用户名..."
                    style="width: 180px;"
                />
                <!--                <el-select-->
                <!--                    class="margin-right-xs"-->
                <!--                    size="mini"-->
                <!--                    placeholder="筛选订阅状态..."-->
                <!--                    style="width: 180px;"-->
                <!--                >-->
                <!--                    <el-option label="已订阅" :value="true"/>-->
                <!--                    <el-option label="未订阅" :value="false"/>-->
                <!--                </el-select>-->
                <el-select
                    v-model="filterParam.tagid"
                    class="margin-right-xs"
                    size="mini"
                    placeholder="筛选用户标签..."
                    style="width: 180px;"
                >
                    <el-option
                        v-for="(item,index) in tagList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
                <!--                <el-date-picker-->
                <!--                    size="mini"-->
                <!--                    type="datetimerange"-->
                <!--                    start-placeholder="开始日期"-->
                <!--                    end-placeholder="结束日期"-->
                <!--                    :default-time="['12:00:00']"-->
                <!--                    style="width: 200px;"-->
                <!--                />-->
            </div>
            <div>
                <el-button
                    size="mini"
                    @click="handlerClearFilter"
                >清空
                </el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="init(filterParam)"
                >筛选
                </el-button>
            </div>
        </header>
        <div class="flex" style="height: 500px;">
            <!--            左侧选项表格部分-->
            <div
                class="flex-sub margin-right-xl flex flex-direction"
                style="overflow: hidden;border: 1px solid #efefef;"
            >
                <el-table
                    class="flex-sub"
                    style="height: 1px;"
                    ref="userTable"
                    :data="userList"
                    @selection-change="handlerSelChange"
                >
                    <el-table-column type="selection"/>
                    <el-table-column prop="headimgurl" label="头像">
                        <template slot-scope="scope">
                            <el-avatar :src="scope.row.headimgurl" size="30px"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="用户名"/>
                    <el-table-column label="订阅状态">
                        <template slot-scope="scope">
                            {{ scope.row.subscribe ? '订阅' : '未订阅' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="地区">
                        <template slot-scope="scope">
                            {{ scope.row.province + scope.row.city }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="subscribeTime" label="订阅时间"/>
                </el-table>
                <!--                分页-->
                <el-pagination
                    :page-count="pageCount"
                    :page-size="pageSize"
                    :total="totalCount"
                    @current-change="handlerCurrentChange"
                />
            </div>
            <!--            右侧选中项列表部分-->
            <div
                class="flex flex-direction"
                style="width: 250px;border: 1px solid #efefef">
                <el-checkbox-group
                    v-model="selListSel"
                    class="flex-sub"
                    style="overflow: auto;height: 1px;">
                    <ul class="padding-lr-xs">
                        <li
                            v-for="(item,index) in selectItems"
                            :key="index"
                            style="line-height: 30px;"
                        >
                            <el-checkbox
                                :label="item.openid"
                            />
                            <!--                            <el-avatar :src="item.headimgurl" size="30px"/>-->
<!--                            <label>{{ item.nickname }}</label>-->
                        </li>
                    </ul>
                </el-checkbox-group>
                <div
                    class="flex justify-center margin-bottom-xs padding-top-xs"
                    style="border-top: 1px solid #efefef;"
                >
                    <el-button
                        size="mini"
                        type=""
                        @click="handlerRemove"
                    >移除
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handlerClear"
                    >清空
                    </el-button>
                </div>
            </div>
        </div>
        <!--        底部操作按钮部分-->
        <template slot="footer">
            <el-button
                size="small"
                type="primary"
                @click="handlerConfirmClick"
            >确认
            </el-button>
            <el-button
                size="small"
                @click="isSync = false"
            >取消
            </el-button>
        </template>
    </el-dialog>
</template>

<script>
import {getUserList} from "@/api/wx";
import {mapState, mapActions} from 'vuex'

export default {
    name: "userSelectDialog",
    props: {
        isMultiple: {
            type: Boolean,
            default: false
        },
        isSync: {
            type: Boolean,
            default: false
        },
        defSelectItem: {
            type: Array,
            default: []
        },
        title: {
            type: String,
            default: '选择用户'
        }
    },
    data() {
        return {
            userList: [],//
            totalCount: 1,
            selectItems: [],// 选中项列表
            selListSel: [],  // 选中项列表中选中的项
            pageSize: 0,
            pageCount: 0,
            filterParam: {
                page: 1,
                sidx: 'subscribe_time',
                order: 'desc',
                tagid: '',
                nickname: '',
                city: '',
                province: '',
                remark: '',
                qrScene: ''
            },
        }
    },
    watch: {
        isSync(newVal, oldVal) {
            this.$emit('update:isSync', newVal)
        }
    },
    computed: {
        ...mapState({
            tagList: state => state.wxUserTags.tags
        })
    },
    methods: {
        ...mapActions({
            getTags: 'wxUserTags/getTags'
        }),
        /**
         * 初始化数据列表
         */
        init(params) {
            getUserList(params ? params : null)
                .then(res => {
                    let data = res.data
                    console.log(res)
                    if (data.code === 200) {
                        this.userList = data.page.list
                        this.totalCount = data.page.totalCount
                        this.pageSize = data.page.pageSize
                        this.pageCount = data.page.pageCount
                    }
                    console.log(this.userList)
                })
            this.$nextTick(() => {
                this.fnLoadTableCheck(this.selectItems,true)
            })
        },
        /**
         * 用户选择列表选中项发送变化时的回调
         * @param selection 选中项的内容
         */
        handlerSelChange(selection) {
            this.userList.forEach(item => {
                let isSel = false
                selection.forEach(it => {
                    if (item.openid === it.openid) {
                        isSel = true
                    }
                })
                if (isSel) {
                    // 是新增项，追加到选中项中去
                    // this.selectItems.push(item)
                    this.selectItems = [...new Set(this.selectItems.concat(item))]
                } else {
                    // 是移除项，从选中项列表中移除
                    this.selectItems.map((it, idx) => {
                        if (item.openid === it.openid) {
                            this.selectItems.splice(idx, 1)
                        }
                    })
                }
            })
        },
        /**
         * 移除按钮点击事件
         */
        handlerRemove() {
            console.log(this.selListSel)
            this.selListSel.forEach(item => {
                this.selectItems.map((it, index) => {
                    if (item === it.openid) {
                        this.selectItems.splice(index, 1)
                        this.$refs.userTable.toggleRowSelection(it, false)
                    }
                })
            })
            this.selListSel = [] // 清空右侧选中项列表
        },
        /**
         * 清空按钮点击事件
         */
        handlerClear() {
            // 清空选中项列表
            this.selectItems = []
            // 选中项集合中，右侧选中的项清空
            this.selListSel = []
            // 清空表格选中项
            this.$refs.userTable.clearSelection()
        },
        /**
         * 确认按钮点击事件
         */
        handlerConfirmClick() {
            // 返回选中项数据,使用展开方法，避免后面清空导致返回的数据被重置
            this.$emit('selected', [...this.selectItems])
            // 关闭用户选择器
            this.$emit("update:isSync",false)
            // 清空当前选中项
            this.handlerClear()
            // 清空筛选条件
            this.handlerClearFilter()
            // 清空选中项的可操作列表项
            this.fnClearSelListSel()
        },
        /**
         * 重置筛选条件
         */
        handlerClearFilter() {
            this.filterParam = {
                page: 1,
                sidx: 'subscribe_time',
                order: 'desc',
                tagid: '',
                nickname: '',
                city: '',
                province: '',
                remark: '',
                qrScene: ''
            }
        },
        fnClearSelListSel() {
            this.selListSel.length = 0
        },
        /**
         * 分页控件，页码切换事件
         * @param param
         */
        handlerCurrentChange(param) {
            console.log(param)
            this.filterParam.pageCount = param
            this.init(this.filterParam)
        },
        /**
         * dialog打开时的回调，在这里初始化选中默认选中项
         */
        handlerDiaOpen(){
            this.selectItems = this.defSelectItem
            this.fnLoadTableCheck(this.selectItems,true)
        },
        /**
         * 设置表格选中项状态
         * @param selectList
         * @param state
         */
        fnLoadTableCheck(selectList,state){
            selectList.forEach(item => {
                this.$refs.userTable.toggleRowSelection(item,state)
            })
        }
    },
    created() {
        this.init()// 初始化用户列表数据
        // 如果tags列表为空，可能是还未获取过标签数据，调用action中的getTags方法进行获取
        if (!this.tagList.length) {
            this.getTags()
        }
    },
    mounted() {
        if (this.defSelectItem.length) {
            this.selectItems = this.defSelectItem
            this.$refs.userTable.toggleRowSelection(this.selectItems)
        }
    }
}
</script>

<style scoped lang="less">

</style>